/* 封装天地图PoiPicker组件 */
Vue.component('poi-picker', {
	template: '<div><input id="pickerInput" :style="placeInput" :placeholder="placeholder" /><div id="poiInfo" :style="poiInfoDiv"></div></div>',
	data: function() {
		return {
			placeholder: '输入关键字选取地点',
			poiPicker: null,

			placeInput: {
				fontSize: '14px',
				width: '200px',
				padding: '5px 5px',
				borderRadius: '9px'
			},
			poiInfoDiv: {
				background: '#fff'
			}
		}
	},
	methods: {
		init: function() {
			let that = this;
			AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
				that.poiPicker = new PoiPicker({
					input: 'pickerInput' //输入框id
				});
				//监听poi选中信息
				that.poiPicker.on('poiPicked', function(poiResult) {
					if (poiResult.item.location) {
						/* 火星坐标转为WGS84 */
						var gcj02towgs84 = coordtransform.gcj02towgs84(poiResult.item.location.lng, poiResult.item.location.lat);
						poiResult.item.location.lng = gcj02towgs84[0];
						poiResult.item.location.lat = gcj02towgs84[1];
						//用户选中的poi点信息
						var source = poiResult.source,
							poi = poiResult.item,
							info = {
								source: source,
								id: poi.id,
								name: poi.name,
								location: poi.location,
								address: poi.address
							};
						//发送选择的poi信息给父组件
						that.$emit('info-selected', info);
					} else {
						that.$Message.warning('所选目标不是一个有效的位置信息!');
					}
				});
			});
		}
	},
	created() {
		this.init();
	}
})
/* 工具按钮组件 */
/* Vue.component('toolbar-button', {
	template: '<div class="toolbar-button"><a href="#" :title="title" @click="doClick"><span></span></a></div>',
	data: function() {
		return {

		}
	},
	props: [
       'title'
	],
	methods: {
		doClick: function() {
			this.$emit('click');
		}
	},
	created() {
	}
}); */
Vue.component('float-pane', {
	template: '<div :style="floatContainer"> <Card :bordered="false" style="width:120px"><div :style="info"><i :style="legend1"></i>未关联</div><div :style="info"><i :style="legend2"></i>已关联</div></Card></div>',
	data: function() {
		return {
			floatContainer: {
				width: '120px',
			},
			info:{
				 lineHeight: '18px',
				 paddingBottom:'5px'
			},
			legend1: {
				width: '18px',
				height: '18px',
				float: 'left',
				marginRight: '18px',
				opacity:'0.7' ,
				background:'#E31A1C'
			},
			legend2: {
				width: '18px',
				height: '18px',
				float: 'left',
				marginRight: '18px',
				opacity:'0.7' ,
				background:'#3388FF'
			}
		}
	},
	props: [
		'bus-data'
	],
	methods: {
		init: function() {

		}
	},
	created() {
		this.init();
	}
});
